<template>
    <el-container>
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            <span class="left">团队长管理</span>
            <search-condition
              :conditionLabel="filterParams.conditionLabel"
              @deleteFilter="deleteFilter"
            ></search-condition>
          </div>
          <div >
            <el-button  v-auth="'user.admin.user.list'" class="commission" @click="commissionSettion">团长分佣设置</el-button>
            <el-button
              v-auth="'user.admin.user.list'"
              class="sa-button-refresh"
              icon="RefreshRight"
              @click="getData()"
            ></el-button>
            <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          </div>
        </div>
      </el-header>
      <el-main class="sa-p-0" v-loading="table.loading">
        <el-table class="sa-table" height="100%" :data="table.data" stripe @sort-change="fieldFilter">
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column sortable="custom" prop="id" label="ID" min-width="80" />
          <el-table-column prop="organize_name" label="团长ID" min-width="120" align="center" />
          <el-table-column prop="nickname" label="会员类型" min-width="120" align="center" />
          <el-table-column prop="nickname" label="开通金额" min-width="120" align="center" />
          <el-table-column prop="nickname" label="到账日期" min-width="120" align="center" />
          <el-table-column prop="nickname" label="用户电话" min-width="120" align="center" />
          <el-table-column prop="nickname" label="团队个数" min-width="120" align="center" />
          <el-table-column prop="nickname" label="会员状态" min-width="120" align="center" />
          <el-table-column prop="nickname" label="到期装填" min-width="120" align="center" />
          <el-table-column prop="nickname" label="缴费时间" min-width="120" align="center" />
          <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
                v-auth="'device.admin.organize.edit'"
                class="is-link"
                type="primary"
                @click="look(scope.row.id)"
            >查看团队
            </el-button>
            <el-button
                v-auth="'device.admin.organize.delete'"
                class="is-link"
                type="danger"
                @click="deleteRow(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-main>
      <sa-view-bar>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  
  <script>
    export default {
      name: 'supply.admin.team',
    };
  </script>
  
  <script setup>
    import { onMounted, reactive } from 'vue';
    import userApi from '@/app/user/api';
    import { usePagination, useModal } from '@/sheep/hooks';
    import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
    import commissionConfig from "./commissionConfig.vue";
    import teamList from './teamList.vue';
    import { composeFilter } from '@/sheep/utils';
    import { cloneDeep } from 'lodash';
  
    const filterParams = reactive({
      tools: {
        user: {
          type: 'tinputprepend',
          placeholder: '请输入查询内容',
          field: 'user',
          user: {
            field: 'id',
            value: '',
          },
          options: [
            {
              label: '用户ID',
              value: 'id',
            },
            {
              label: '昵称',
              value: 'nickname',
            },
            {
              label: '手机号',
              value: 'mobile',
            },
          ],
        },
        status: {
            type: 'tselect',
            label: '会员状态',
            field: 'status',
            value: '',
            options: {
                data: [
                {
                    label: '待开通',
                    value: 0,
                },
                {
                    label: '已开通',
                    value: 1,
                },
                {
                    label: '已到期',
                    value: 2,
                }]
            },
        },
        check: {
            type: 'tselect',
            label: '到期状态',
            field: 'check',
            value: '',
            options: {
                data: [
                {
                    label: '未到期',
                    value: 1,
                },
                {
                    label: '已到期',
                    value: 2,
                }]
            },
        },
       
      },
      data: {
        user: { field: 'id', value: '' },
        status:'',
        check:'',
       
      },
      conditionLabel: {},
    });

    const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  
    const table = reactive({
      loading: false,
      data: [],
      order: '',
      sort: '',
    });
  
    const { pageData } = usePagination();
  
    async function getData(page) {
      table.loading = true;
      if (page) pageData.page = page;
      let tempSearch = cloneDeep(filterParams.data);
      let search = composeFilter(tempSearch, {
        nickname: 'like',
        mobile: 'like',
        organize_name:'like',
      });
      const { error, data } = await userApi.list({
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
        order: table.order,
        sort: table.sort,
        machine_id:true,
      });
      if (error === 0) {
        table.data = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
      }
      table.loading = false;
    }
  
    function fieldFilter({ prop, order }) {
      table.order = order == 'ascending' ? 'asc' : 'desc';
      table.sort = prop;
      getData();
    }
  
    function look(id) {
        useModal(teamList, 
        {
          title: '查看团队列表',
          id,
        },
        {
          confirm: (res) => {
            getData();
          },
        },
      );
    }

    function commissionSettion(){
      useModal(
        commissionConfig,
      {
        title: '团长分佣设置',
      },
      {
        confirm: (res) => {
          getData();
        },
      },
    );
    }
  
    async function onDelete(id) {
      const { error } = await userApi.delete(id);
      error == 0 && getData();
    }
  
    onMounted(() => {
      // getData();
    });
  </script>
  